<template>
  <div class="all_content">
    <div class="bx">
      <div class="focus_top cl">
        <!--头部-->
        <div class="tit_left fl">
          <h2>赛事视频</h2>
        </div>
        <ul class="tit_center fl">
          <li
            v-for="el in titList"
            :key="el.id"
            :class="{bottom_color:el.id===titStatus||el.id===titenterStatus}"
            @click="tieClick(el.id)"
            @mouseenter="tieEnter(el.id)"
            @mouseleave="tieLeave(el.id)"
          >
            {{el.tit}}
            <div class="bottom_border" v-if="el.id===titStatus||el.id===titenterStatus"></div>
          </li>
        </ul>
        <div class="tit_right fr">
          <a href="JavaScript:void(0)">2019全球总决赛</a>
          <div class="tit_right_img2" @mouseenter="dongImg" @mouseleave="tingImg"></div>
        </div>
      </div>
      <ul class="focus_middle">
        <li>1</li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  data: () => ({
    titList: [
      {
        id: 0,
        tit: '全场回顾'
      },
      {
        id: 1,
        tit: '赛事速看'
      },
      {
        id: 2,
        tit: '巅峰时刻'
      },
      {
        id: 3,
        tit: 'LPL官方节目'
      },
      {
        id: 4,
        tit: '比赛集锦'
      },
      {
        id: 5,
        tit: '分析评论'
      },
      {
        id: 6,
        tit: '人物采访'
      }
    ],
    titStatus: 0,
    dongimg2: true,
    setin2: null,
    titenterStatus: undefined
  }),
  created () {},
  methods: {
    dongImg () {
      var Img = document.getElementsByClassName('tit_right_img2')[0]
      console.log(Img)
      this.setin2 = setInterval(function () {
        if (this.dongimg2) {
          Img.style.left = 162 + 'px'
          this.dongimg2 = !this.dongimg2
        } else {
          Img.style.left = 158 + 'px'
          this.dongimg2 = !this.dongimg2
        }
      }, 100)
    },
    tingImg () {
      clearInterval(this.setin2)
    },
    tieClick (id) {
      this.titStatus = id
    },
    tieEnter (id) {
      this.titenterStatus = id
    },
    tieLeave () {
      this.titenterStatus = undefined
    }
  }
}
</script>
<style lang="less" scoped>
.all_content {
  padding-top: 60px;
  width: 100%;
  .bx {
    width: 1360px;
    margin: auto;
    // background: #ff0;
    .focus_top {
      overflow: inherit;
      height: 45px;
      line-height: 45px;
      border-bottom: 1px solid #ccc;
      .tit_left {
        h2 {
          padding-left: 10px;
          border-left: solid #1da6ba 5px;
        }
      }
      .tit_center {
        .bottom_color {
          color: #1da6ba !important;
        }
        li {
          float: left;
          margin: 0px 20px;
          position: relative;
          font-weight: bold;
          cursor: pointer;
          overflow: hidden;
          .bottom_border {
            position: absolute;
            top: 38px;
            left: 50%;
            height: 10px;
            width: 200px;
            background: url("../../images/comm1901 (1).png");
            background-position: -112px 0;
            z-index: 10;
            background-size: 312px 54px;
            margin-left: -100px;
          }
        }
      }
      .tit_right {
        position: relative;
        margin-right: 100px;
        .tit_right_img2 {
          position: absolute;
          left: 160px;
          top: 0px;
          width: 15px;
          height: 9px;
          background-image: url("../../images/comm1901.png");
          background-position: -128px -12px;
          background-size: 312px 54px;
          background-repeat: no-repeat;
          margin-top: 16px;
          cursor: pointer;
        }
      }
    }
  }
}
</style>
